import './index.less';
import { Tabs } from 'antd';
import PublicTitle from '@/components/public-title';
import PieChart from './pie_chart';
export default function RightBottom() {
  const namespace = 'rightbottom';
  const pieData = [
    { value: 79, name: '情感纠纷' },
    { value: 11, name: '经济纠纷' },
    { value: 4, name: '家庭矛盾' },
    { value: 2, name: '邻里纠纷' },
    { value: 2, name: '工作纠纷' },
    { value: 12, name: '琐事纠纷' },
    { value: 14, name: '精神病人肇事肇祸' },
  ];
  return (
    <div className={`${namespace}`}>
      <div className={`${namespace}-title`}>
        <PublicTitle name="发案态势" />
      </div>
      <div className={`${namespace}-content`}>
        <Tabs
          centered
          tabBarGutter={100}
          className={`${namespace}-content-tabs`}
          defaultActiveKey="1"
          items={[
            {
              label: `命案`,
              key: '1',
              children: (
                <div className={`${namespace}-content-data`}>
                  <PieChart pieData={pieData} text="命案数" />
                </div>
              ),
            },
            {
              label: `重伤`,
              key: '2',
              children: <div className={`${namespace}-content-data`}>2</div>,
            },
            {
              label: `其他`,
              key: '3',
              children: <div className={`${namespace}-content-data`}>3</div>,
            },
            {
              label: `走势`,
              key: '4',
              children: <div className={`${namespace}-content-data`}>3</div>,
            },
          ]}
        />
      </div>
    </div>
  );
}
